<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-icon.css"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-revise.css"/>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/ext-revise.js"></script>
<script type="text/javascript" src="../ext/src/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
html, body {
	font: normal 12px verdana;
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow: hidden;
	height: 100%;
}
.empty .x-panel-body {
	padding-top: 20px;
	text-align: center;
	font-style: italic;
	color: gray;
	font-size: 11px;
}
.x-tree-node-child {
	margin: 2px 2px 0 2px;
}
</style>
</head>

<body>
<div class="x-background"></div>
<script type="text/javascript">
Ext.onReady(function() {
	var item1 = new Ext.Panel({
		title: '权限管理',
		//html: '&lt;empty panel&gt;',
		//cls:'empty',
		items: [new Ext.tree.TreePanel({
			baseCls: "x-plain",
			loader: new Ext.tree.TreeLoader(),
			root: new Ext.tree.AsyncTreeNode({
				expanded: true,
				children: [{
					text: "用户角色分配",
					leaf: true,
					cls: "x-tree-node-child"
				}, {
					text: "资源角色分配",
					leaf: true,
					cls: "x-tree-node-child"
				}, {
					text: "用户资源编辑",
					leaf: true,
					cls: "x-tree-node-child"
				}]
			}),
			//lines: false,
			rootVisible: false
		})]
	});

	var item2 = new Ext.Panel({
		title: '安全管理',
		html: '&lt;empty panel&gt;',
		cls:'empty'
	});

	var item3 = new Ext.Panel({
		title: '数据管理',
		html: '&lt;empty panel&gt;',
		cls:'empty'
	});

	var item4 = new Ext.Panel({
		title: '日志管理',
		html: '&lt;empty panel&gt;',
		cls:'empty'
	});

	var item5 = new Ext.Panel({
		title: '其他管理',
		html: '&lt;empty panel&gt;',
		cls:'empty'
	});

	var accordion = new Ext.Panel({
		region:'west',
		margins:'5 0 5 5',
		split:true,
		collapseMode: "mini",
		layoutConfig: {
			// layout-specific configs go here
			titleCollapse: true,
			animate: true,
			hideCollapseTool: false//,
			//activeOnTop: true
		},
		width: 300,
		layout: 'accordion',
		items: [item1, item2, item3, item4, item5]
	});

	var viewport = new Ext.Viewport({
		layout:'border',
		items:[accordion, {
			region:'center',
			margins:'5 5 5 0',
			cls:'empty',
			bodyStyle:'background:#f1f1f1',
			html:'<br/><br/>&lt;empty center panel&gt;'
		}]
	});
});
</script>
</body>
</html>
